<!--
 * @Descripttion: 出手鸭小程序
 * @version:1.0.1 
 * @Author: HHL
 * @Date: 2023-10-18 15:17:15
 * @LastEditTime: 2023-10-18 15:18:44
 * @LastEditors:Hui
-->

<template>
  <view class="user-phone">
    <view class="h3 font-24 color-999">测一测手机值多少钱？</view>

    <view class="phone_wrap">
      <view class="flex">
        <view class=" flex-shrink0">
          <common-image
            :src="showProductInfo.productImage ? showProductInfo.productImage + '?x-oss-process=image/resize,m_fill,w_120' : ''"
            style="width: 120rpx; height: 120rpx; display: block;"
          />
        </view>
        <view class="info flex flex-column flex-between flex-1">
          <view class="name font-32 color-000 font-w500 u-one-line">{{showProductInfo.productName}}</view>
          <view class="flex flex-between">
            <view class="price font-w500">
              <text class="font-26">￥</text>
              <text>{{showProductInfo.maxPrice}}</text>
              <text class="tip font-24 color-666 font-w400">最高可卖</text>
            </view>
            <button class="btn" @click="goPage('product', {id: showProductInfo.productId})">立即换钱</button>
          </view>
        </view>
      </view>
      
    </view>
  </view>
</template>


<script>
export default {
  props: {
    showProductInfo: { type: Object, default: {} }
  },
}
</script>

<style lang="scss" scoped>
.user-phone{
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
  padding: 5rpx 42rpx 22rpx 60rpx;

  .h3{
    padding-left: 5rpx;
    line-height: 62rpx;
  }
}

.phone_wrap{
  .image{
    width: 120rpx;
    height: 120rpx;
    display: block;
  }
  .info{
    width: 100%;
    padding-left: 8rpx;
    .name{
      width: 400rpx;
      line-height: 52rpx;
    }
    .price{
      font-size: 48rpx;
      color: #333;
      line-height: 52rpx;
      height: 52rpx;
    }
    .tip{
      padding-left: 24rpx;
    }
  }

  .btn{
    width: 158rpx;
    line-height: 62rpx;
    height: 62rpx;
    background: linear-gradient(-85deg, #FA5041, #FA5041);
    box-shadow: 0 6rpx 8rpx 0 rgba(180,255,246,0.2);
    border-radius: 31rpx;
    font-size: 26rpx;
    color: #fff;
    font-weight: bold;
  }
}





</style>